<template>
  <el-container>
    <el-table
      :data="resultData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        align="center"
        label="项目"
        width="180">
      </el-table-column>
      <el-table-column
        prop="dictoryCode"
        align="center"
        label="项目代码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="value"
        align="center"
        label="项目值"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
        width="180">
        <template #default="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="修改时间">
        <template #default="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       :inlist="true">
        <template #header>
          <a  href ="http://localhost:8202/dictory/dictManager/exportExcelModel" class="el-button">导出模板</a>
          <a  href ="http://localhost:8202/dictory/dictManager/exportExcelData" class="el-button">导出数据</a>
          <a v-if="resultData.length===0" class="el-button" @click="importData(1)">导入数据</a>
        </template>
        <template #default="scope">
          <el-button size="mini" @click="importData(scope.row.id)">导入数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="导入数据" v-model="isImport" width="400px">
        <el-upload
                class="upload-demo"           
                drag
                :action="`http://localhost:8202/dictory/dictManager/importExcelData/${parentId}`"
                multiple="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传xlsx文件
                  </div>
                </template>
          </el-upload>
    </el-dialog>
  </el-container>
</template>
<script lang="ts">
import { findChildData } from '/@/api/dict'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'DictManager',
  setup(){
    const data=reactive({
      resultData: [],
      childData: [],
      isImport: false as  boolean,
      parentId: 1 as  number
    })
    function getChildById(id:number) {
      findChildData(id).then((result) => {
          if (data.resultData.length === 0) {
            data.resultData = result.data
          } else {
            data.childData = result.data
          }
      }).catch(error => {
        console.log(error)
      })
    }
    function load (tree:any, treeNode:any, resolve:any) {
      getChildById(tree.id)
      setTimeout(() => {
        resolve(data.childData)
      }, 1000)
    }
    function importData (parentId:number) {
     // debugger
      data.parentId = parentId
      data.isImport = true
    }
    //初始化时调用
      //调用
    onMounted(()=>{
      getChildById(1)
    })
    return{
      ...toRefs(data),
      getChildById,
      load,
      importData
    }
  }
})
</script>
